<template>
  <div class="radio">
    <!-- antd 示例 -->

    <!-- // 然后在父组件中使用
<lg-radio v-model="user.sex" label='1'><i class="iconfont lg-boy"></i></lg-radio>
<lg-radio v-model="user.sex" label='0'><i class="iconfont lg-girl"></i></lg-radio> -->

    <!-- my radio -->
    <h3>my radio</h3>
    <radioButton
      :model="sex"
      :label="label1"
      ref="radio"
      @change="itemChange"
      :styleObj="this.styleObj"
      :borderObj="this.borderObj"
      :radioId="1"
      :createdObj="this.createdObj"
    >
      <a-icon type="man" style="color: #22a6f1" />
    </radioButton>
    <radioButton
      ref="radio"
      :model="sex"
      :label="label2"
      @change="itemChange"
      :styleObj="this.styleObj"
      :borderObj="this.borderObj"
      :radioId="1"
    >
      <a-icon type="woman" style="color: #e06253"
    /></radioButton>

    <radioButton
      ref="radio"
      :model="sex2"
      :label="label3"
      @change="itemChange"
      :styleObj="this.styleObj"
      :borderObj="this.borderObj"
      :radioId="1"
    >
      <div contenteditable="true">111</div>
    </radioButton>

    <h3>user2</h3>

    <!-- <emRadio
      label="1"
      @change="itemChange"
      :styleObj="this.styleObj"
      :borderObj="this.borderObj"
      :radioId="2"
    >
      <a-icon type="man" style="color: #22a6f1" />
    </emRadio>
    <emRadio
      v-model="user2.sex"
      label="2"
      @change="itemChange"
      :styleObj="this.styleObj"
      :borderObj="this.borderObj"
      :radioId="2"
    >
      <a-icon type="woman" style="color: #e06253"
    /></emRadio> -->

    <!-- <h3>my radip gropu</h3>
    <div>value:{{ value1 }}</div>
    <emRadioGroup
      :options="options"
      :default-value="value1"
      @change="itemChange"
    ></emRadioGroup> -->
    <div class="text">
      <!-- 字体颜色 -->
      字体颜色:
      <a-select
        :default-value="styleObj.color"
        style="width: 120px"
        @change="selectChange"
      >
        <a-select-option
          :value="item.value"
          v-for="(item, index) in colorList"
          :key="index"
        >
          {{ item.name }}
        </a-select-option>
      </a-select>
      字体大小:
      <a-input
        placeholder="字体大小"
        type="number"
        v-model="styleObj.fontSize"
      />
      字体是否加粗:
      <a-switch default-checked @change="onWeight" />
      <br />
      选中框的border颜色:
      <a-select
        :default-value="borderObj.borderColor"
        style="width: 120px"
        @change="selectBorderChange"
      >
        <a-select-option
          :value="item.value"
          v-for="(item, index) in colorList"
          :key="index"
        >
          {{ item.name }}
        </a-select-option>
      </a-select>
      选中框border的 宽度
      <a-input
        placeholder="边框宽度"
        type="number"
        v-model="borderObj.borderWidth"
      />
      选中框border的 高度
      <a-input
        placeholder="边框宽度"
        type="number"
        v-model="borderObj.borderHeight"
      />
      选中框的border背景颜色:
      <a-select
        :default-value="borderObj.borderCheckColor"
        style="width: 120px"
        @change="selectBorderCheckChange"
      >
        <a-select-option
          :value="item.value"
          v-for="(item, index) in colorList"
          :key="index"
        >
          {{ item.name }}
        </a-select-option>
      </a-select>
    </div>
  </div>
</template>

<script>
const plainOptions = ["Applexxx", "Pearxxx", "Orangexxx"];
const options = [
  { label: "Applexx", value: "1" },
  { label: "Pearx", value: "2" },
  { label: "Orangex", value: "3", disabled: true },
];
const optionsWithDisabled = [
  { label: "Apple", value: "Apple" },
  { label: "Pear", value: "Pear" },
  { label: "Orange", value: "Orange", disabled: false },
];
export default {
  data() {
    return {
      sex: "sex",

      sex2: "sex2",
      label1: 1,
      label2: 2,
      label3: 3,
      // antd  测试数据
      plainOptions,
      options,
      optionsWithDisabled,
      value1: "1",
      value2: "Apple",
      value3: "Apple",

      styleObj: {
        fontSize: 20,
        // fontWeigth: true,
        color: "#000000",
        textAlign: "left",
        fontWeight: "normal",
        fontStyle: "normal",
        fontFamily: "simsun",
      },
      // 字体颜色
      borderObj: {
        // 边框颜色
        borderColor: "#e06c75",
        // 选中的边框颜色
        borderCheckColor: "#1cd66c",
        // 线条配置 默认实线 0 实线 1 虚线
        borderLine: 0,
        // 边框宽度
        borderWidth: 7, //单位mm
        // 边框高度
        borderHeight: 7, //单位mm
        // 边框形状
        borderShape: 0, //0 圆形 ，1方形
      },
      colorList: [
        { name: "红色", value: "#e06c75" },
        { name: "蓝色", value: "#21b4e0" },
        { name: "黄色", value: "rgba(209, 154, 102)" },
        { name: "黑色", value: "#000" },
      ],
      createdObj: {
        type: 1,
        id: "radioBtn_123",
        x: 0,
        y: 0,
        width: 30,
        height: 30,
      },
    };
  },
  methods: {
    itemChange(e) {
      console.log(e, "父组件");
      this.value1 = e.value;
      this.$message.info(e.value);
      if (e.name == this.model) {
        console.log(this.$refs, "refs");
      }
      let radioList = document.querySelectorAll(`*[name=${e.name}]`);
      radioList.forEach((v) => {
        // v.parentElement.style[--pseudoElementBackgroundColor] = "red";
        console.log((v.parentElement.style = ""));
      });
      // console.log(radioList);
      // this.$refs.radio.selectNum = e;
    },

    // 下拉选中颜色
    selectChange(value) {
      this.fontObj.fontColor = value;
    },
    // 是否加粗
    onWeight(check) {
      this.fontObj.fontWeight = check;
      console.log(check);
    },
    // 选中框颜色
    selectBorderChange(value) {
      this.borderObj.borderColor = value;
    },
    selectBorderCheckChange(value) {
      this.borderObj.borderCheckColor = value;
    },
  },
};
</script>

<style>
h3 {
  margin: 20px 0;
}
.radio {
  padding: 10px;
}
</style>
